<template>
  <div class="dashboard-container">
    <div>
      <el-row type="flex" justify="left" style="margin-top: 15px">
        <el-col :span="16">
          <dir style="text-align: center">
            <div style="margin-top: 20px">
              <el-radio-group v-model="radio[0]" size="small">
                <el-radio-button
                  @click.native.prevent="
                    getDataOverview('近7日', '?date_range=7')
                  "
                  label="近7日"
                ></el-radio-button>
                <el-radio-button
                  style="margin-left: 10px; border-left: 1px solid #dcdfe6"
                  @click.native.prevent="
                    getDataOverview('近30日', '?date_range=30')
                  "
                  label="近30日"
                ></el-radio-button>
              </el-radio-group>
            </div>
          </dir>
          <div id="main4" style="width: 100%; height: 450px" />
        </el-col>

        <!-- <el-col :span="1">
          <span></span>
        </el-col> -->

        <el-col :span="7">
          <h3>数据概览</h3>
          <el-row
            style="background-color: #93d2f3; border-radius: 8px; height: 135px"
            type="flex"
            justify="center"
            align="middle"
          >
            <el-col :span="12">
              <div>
                <div
                  style="text-align: center; font-size: 20px; font-weight: 600"
                >
                  未解决Bug总数
                </div>
                <div
                  style="
                    text-align: center;
                    padding-top: 20px;
                    font-size: 29px;
                    font-weight: 600;
                  "
                >
                  {{ dataOverview.unsolved_bug.total_num }}
                </div>
              </div>
            </el-col>
            <el-col :span="2">
              <div>
                <span
                  >昨日<br /><br />{{
                    dataOverview.unsolved_bug.yesterday_add
                  }}</span
                >
              </div>
            </el-col>
            <!-- <el-col :span="10">
              <div id="main3" style="width: 100%; height: 100%" />
            </el-col> -->
          </el-row>

          <el-row
            style="background-color: #93d2f3; border-radius: 8px; height: 135px"
            type="flex"
            justify="center"
            align="middle"
          >
            <el-col :span="12">
              <div>
                <div
                  style="text-align: center; font-size: 20px; font-weight: 600"
                >
                  已完成版本数
                </div>
                <div
                  style="
                    text-align: center;
                    padding-top: 20px;
                    font-size: 29px;
                    font-weight: 600;
                  "
                >
                  {{ dataOverview.onlined_version.total_num }}
                </div>
              </div>
            </el-col>
            <el-col :span="2">
              <div>
                <span
                  >昨日<br /><br />{{
                    dataOverview.onlined_version.yesterday_add
                  }}</span
                >
              </div>
            </el-col>
            <!-- <el-col :span="10">
              <div id="main2" style="width: 100%; height: 135px" />
            </el-col> -->
          </el-row>
          <el-row
            style="background-color: #93d2f3; border-radius: 8px; height: 135px"
            type="flex"
            justify="center"
            align="middle"
          >
            <el-col :span="12">
              <div>
                <div
                  style="text-align: center; font-size: 20px; font-weight: 600"
                >
                  进行中的版本数
                </div>
                <div
                  style="
                    text-align: center;
                    padding-top: 20px;
                    font-size: 29px;
                    font-weight: 600;
                  "
                >
                  {{ dataOverview.running_version.total_num }}
                </div>
              </div>
            </el-col>
            <el-col :span="2">
              <div>
                <span
                  >昨日<br /><br />{{
                    dataOverview.running_version.yesterday_add
                  }}</span
                >
              </div>
            </el-col>
            <!-- <el-col :span="10">
              <div id="main1" style="width: 100%; height: 135px" />
            </el-col> -->
          </el-row>
        </el-col>
      </el-row>
      <!-- <el-row style="margin-top: 15px">
        <el-col :span="8">
          <h3>Bug数据</h3>
          <div>
            <h4>当月未解决Bug分布</h4>
          </div>
          <div id="main7" style="width: 100%; height: 250px" />
        </el-col>
        <el-col :span="16">
          <dir style="text-align: center">
            <el-radio-group v-model="radio[2]" size="small">
              <el-radio-button
                @click.native.prevent="echarts78('近7日', '?date_range=7')"
                label="近7日"
              ></el-radio-button>
              <el-radio-button
                style="margin-left: 10px"
                @click.native.prevent="echarts78('近30日', '?date_range=30')"
                label="近30日"
              ></el-radio-button>
            </el-radio-group>
          </dir>
          <div id="main8" style="width: 100%; height: 360px" />
        </el-col>
      </el-row> -->

      <el-row style="margin-top: 15px">
        <el-col :span="11">
          <h3>当前未解决Bug超时情况</h3>
          <div id="main9" style="width: 100%; height: 300px" />
        </el-col>
        <el-col :span="13">
          <h3 style="text-align: center; margin: 18px 0 60px 0">
            当前未解决Bug严重级分布情况
          </h3>
          <div id="main10" style="width: 100%; height: 330px" />
        </el-col>
      </el-row>

      <el-row style="margin-top: 15px">
        <h3>延期30天与未解决严重级Bug清单</h3>
        <!--  -->
        <el-table
          height="600"
          :data="bugDetailList"
          border
          style="width: 100%; margin-top: 30px"
          @sort-change="sortChange"
        >
          <el-table-column prop="project_name" label="项目集" width="180">
          </el-table-column>
          <el-table-column prop="subsys_name" label="子系统" width="180">
          </el-table-column>
          <el-table-column
            align="center"
            prop="Bug_priority"
            label="严重等级"
            width="120"
            sortable
          >
          </el-table-column>
          <el-table-column prop="Bug_id" label="BugID" width="120" sortable>
          </el-table-column>
          <el-table-column prop="Bug_title" label="Bug标题" width="460">
          </el-table-column>
          <el-table-column
            prop="create_date"
            label="创建日期"
            sortable
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="creator"
            label="创建人员"
            width="120"
            sortable="custom"
          >
          </el-table-column>
          <el-table-column prop="assigner" label="指派人" width="120">
          </el-table-column>
          <el-table-column prop="delay_days" label="距离当前天数" width="120">
          </el-table-column>
          <el-table-column prop="status" label="解决状态" width="120">
          </el-table-column>
        </el-table>
        <!-- <el-col :span="24">
          <h3>排行榜</h3>
        </el-col>
        <el-col :span="8">
          <el-row type="flex" justify="end" align="middle">
            <el-col :span="10">
              <h4>Bug创建排行榜</h4>
            </el-col>
            <el-col style="text-align: right; margin-right: 20px" :span="14">
              <el-button size="mini">今天</el-button
              ><el-button size="mini">当月</el-button>
            </el-col>
          </el-row>
          <el-row>
            <template
              v-for="(value, index) in rankBoardData.rank_board.Bug_create_rank
                .today"
            >
              <el-col
                v-for="(value, key) in value"
                :key="value + key"
                style="padding: 10px 8px"
                :span="24"
              >
                <span>
                  <strong>{{ index + 1 }}</strong>
                </span>
                <span style="padding: 0px 20px">{{ key }}</span>
                <strong style="float: right; padding-right: 20px">{{
                  value
                }}</strong>
              </el-col>
            </template>
          </el-row>
        </el-col>
        <el-col
          :span="8"
          style="
            border-right: 2px dashed #a4acbb;
            border-left: 2px dashed #a4acbb;
          "
        >
          <el-row type="flex" justify="center" align="middle">
            <el-col style="margin-left: 20px" :span="10">
              <h4>Bug有效率排行榜</h4>
            </el-col>
            <el-col style="text-align: right; margin-right: 20px" :span="14">
              <el-button size="mini">今天</el-button
              ><el-button size="mini">当月</el-button>
            </el-col>
          </el-row>
          <el-row>
            <template
              v-for="(value, index) in rankBoardData.rank_board
                .Bug_efficient_rank.today"
            >
              <el-col
                v-for="(value, key) in value"
                :key="value + key"
                style="padding: 10px 8px"
                :span="24"
              >
                <span>
                  <strong>{{ index + 1 }}</strong>
                </span>
                <span style="padding: 0px 20px">{{ key }}</span>
                <strong style="float: right; padding-right: 20px">{{
                  value
                }}</strong>
              </el-col>
            </template>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row type="flex" justify="center" align="middle">
            <el-col style="margin-left: 20px" :span="10">
              <h4>Bug未解决排行榜</h4>
            </el-col>
            <el-col style="text-align: right; margin-right: 20px" :span="14">
              <el-button size="mini">今天</el-button
              ><el-button size="mini">当月</el-button>
            </el-col>
          </el-row>
          <el-row>
            <template
              v-for="(value, index) in rankBoardData.rank_board
                .Bug_unsolved_rank.today"
            >
              <el-col
                v-for="(value, key) in value"
                :key="value + key"
                style="padding: 10px 8px"
                :span="24"
              >
                <span>
                  <strong>{{ index + 1 }}</strong>
                </span>
                <span style="padding: 0px 20px">{{ key }}</span>
                <strong style="float: right; padding-right: 20px">{{
                  value
                }}</strong>
              </el-col>
            </template>
          </el-row>
        </el-col> -->
      </el-row>
      <el-row style="margin-top: 15px">
        <el-col :span="17">
          <h3>迭代版本</h3>
          <div style="padding-left: 18px">
            <h4>版本分布状态</h4>
          </div>
          <div id="main5" style="width: 100%; height: 580px" />
        </el-col>
        <el-col :span="7">
          <dir style="text-align: center">
            <el-radio-group v-model="radio[1]" size="small">
              <el-radio-button
                @click.native.prevent="echarts5('近7日', '?date_range=7')"
                label="近7日"
              ></el-radio-button>
              <el-radio-button
                style="margin-left: 10px; border-left: 1px solid #dcdfe6"
                @click.native.prevent="echarts5('近30日', '?date_range=30')"
                label="近30日"
              ></el-radio-button>
            </el-radio-group>
          </dir>
          <div id="main6" style="width: 100%; height: 580px" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import * as dashboard from "@/api/dashboard";
export default {
  name: "Dashboard",
  data() {
    return {
      radio: ["近7日", "近7日", "近7日"],
      bugDetailList: [],
      dataOverview: {
        running_version: {
          total_num: 358,
          yesterday_add: 0,
          day_compare_increase: "0.0%",
        },
        onlined_version: {
          total_num: 4,
          yesterday_add: 0,
          day_compare_increase: "0.0%",
        },
        unsolved_bug: {
          total_num: 202,
          yesterday_add: 0,
          day_compare_increase: "0.0%",
        },
        unsolved_bug_plot: {
          data_dot: [
            {
              "2022-11-27": 75,
            },
            {
              "2022-11-28": 75,
            },
            {
              "2022-11-29": 75,
            },
            {
              "2022-11-30": 75,
            },
            {
              "2022-12-01": 75,
            },
            {
              "2022-12-02": 75,
            },
            {
              "2022-12-03": 75,
            },
            {
              "2022-12-04": 75,
            },
            {
              "2022-12-05": 75,
            },
            {
              "2022-12-06": 75,
            },
            {
              "2022-12-07": 75,
            },
            {
              "2022-12-08": 75,
            },
            {
              "2022-12-09": 75,
            },
            {
              "2022-12-10": 75,
            },
            {
              "2022-12-11": 75,
            },
            {
              "2022-12-12": 75,
            },
            {
              "2022-12-13": 75,
            },
            {
              "2022-12-14": 75,
            },
            {
              "2022-12-15": 75,
            },
            {
              "2022-12-16": 75,
            },
            {
              "2022-12-17": 75,
            },
            {
              "2022-12-18": 75,
            },
            {
              "2022-12-19": 75,
            },
            {
              "2022-12-20": 75,
            },
            {
              "2022-12-21": 75,
            },
            {
              "2022-12-22": 75,
            },
            {
              "2022-12-23": 75,
            },
            {
              "2022-12-24": 75,
            },
            {
              "2022-12-25": 75,
            },
            {
              "2022-12-26": 75,
            },
          ],
          date_range: 30,
        },
      },
      rankBoardData: {
        rank_board: {
          Bug_create_rank: {
            today: [
              {
                余理炜: 419,
              },
              {
                夏悲鸿: 417,
              },
              {
                颜婷婷: 417,
              },
              {
                任宗秀: 239,
              },
              {
                孔露婷: 166,
              },
              {
                王健: 137,
              },
            ],
          },
          Bug_efficient_rank: {
            today: [
              {
                余理炜: 22,
              },
              {
                廖青青: 13,
              },
              {
                任宗秀: 11,
              },
              {
                薛皓仁: 9,
              },
              {
                姜子奇: 9,
              },
              {
                王荣: 8,
              },
            ],
          },
          Bug_unsolved_rank: {
            today: [
              {
                董小静: 95.45,
              },
              {
                储健: 93.33,
              },
              {
                杨涛: 92.86,
              },
              {
                张文繁: 91.18,
              },
              {
                夏悲鸿: 87.05,
              },
              {
                余为刚: 86.67,
              },
            ],
          },
        },
      },

      sortMethod(a, b) {
        return a.localeCompare(b);
      },
      sortChange({ column, prop, order }) {
        this.Bug_detail_list.sort((a, b) => {
          if (order === "ascending") {
            return this.sortMethod(a[prop], b[prop]);
          } else if (order === "descending") {
            return this.sortMethod(b[prop], a[prop]);
          } else {
            return this.sortMethod(a[prop], b[prop]);
          }
        });
      },
      historyBugDelayData: {
        "30-60days": 0,
        "15-30days": 0,
        "7-15days": 0,
        "2-7days": 0,
      },
      debugData: {
        this_mouth_unsolved_bug_distribute_pie: {
          postion: 8,
          map: 9,
          deliver: 0,
        },
        this_mouth_bug_histogram: {
          bug_add_histogram: [
            {
              "2022-12-20": 15,
            },
            {
              "2022-12-21": 3,
            },
            {
              "2022-12-22": 10,
            },
            {
              "2022-12-23": 6,
            },
            {
              "2022-12-24": 90,
            },
            {
              "2022-12-25": 80,
            },
            {
              "2022-12-26": 30,
            },
          ],
          date_range: 7,
        },
        this_mouth_bug_line: {
          bug_close_line: [
            {
              "2022-12-20": 5,
            },
            {
              "2022-12-21": 19,
            },
            {
              "2022-12-22": 6,
            },
            {
              "2022-12-23": 7,
            },
            {
              "2022-12-24": 3,
            },
            {
              "2022-12-25": 10,
            },
            {
              "2022-12-26": 90,
            },
          ],
          date_range: 7,
        },
      },
    };
  },
  methods: {
    async echarts5(name, params) {
      if (name) this.$set(this.radio, 1, name);
      let myChart5 = this.echarts.init(document.getElementById("main5"));
      let res = await dashboard.iterationVersionExtension(params);

      //   data: {
      //     Iteration_version: {
      //       version_status_destribute_histogram: {
      //         runing_version: [
      //           {
      //             name: "中台技术",
      //             runing_version_num: 0,
      //             blocking_version_num: 0,
      //             closed_version: 37,
      //           },
      //           {
      //             name: "平台算法部",
      //             runing_version_num: 0,
      //             blocking_version_num: 0,
      //             closed_version: 14,
      //           },
      //           {
      //             name: "高精度定位平台",
      //             runing_version_num: 0,
      //             blocking_version_num: 0,
      //             closed_version: 159,
      //           },
      //           {
      //             name: "数字底座",
      //             runing_version_num: 0,
      //             blocking_version_num: 0,
      //             closed_version: 34,
      //           },
      //           {
      //             name: "车端地图引擎V2.0",
      //             runing_version_num: 0,
      //             blocking_version_num: 0,
      //             closed_version: 20,
      //           },
      //           {
      //             name: "车路协同云控平台V1.0",
      //             runing_version_num: 1,
      //             blocking_version_num: 0,
      //             closed_version: 3,
      //           },
      //           {
      //             name: "智能网联汽车大数据云控基础平台项目(136)",
      //             runing_version_num: 0,
      //             blocking_version_num: 0,
      //             closed_version: 83,
      //           },
      //         ],
      //       },
      //     },
      //     date_range: 7,
      //   },
      // };
      let data = [[], [], [], []];
      for (let i of res.data.Iteration_version
        .version_status_destribute_histogram.runing_version) {
        data[0].push(i.name);
        data[1].push(i.runing_version_num);
        data[2].push(i.blocking_version_num);
        data[3].push(i.closed_version);
      }
      let option3 = {
        tooltip: {
          //提示框设置
          trigger: "axis",
          // axisPointer: {
          //   //设置横线的样式
          //   type: "cross",
          //   crossStyle: {
          //     color: "red",
          //   },
          // },
          textStyle: {
            //设置提示框的对齐方式
            align: "left",
          },
        },
        grid: {
          //设置内容区域距离周边的距离
          left: "3%",
          right: "0",
          top: "50px",
          bottom: "0px",
          containLabel: true,
        },
        toolbox: {
          show: false,
          // axisPointer: {
          //   // 坐标轴指示器，坐标轴触发有效
          //   type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          // },
        },
        xAxis: [
          {
            type: "category",
            data: data[0],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#1E2240", //轴线的颜色
              },
            },
            axisLabel: {
              //展示角度
              rotate: 60,
              //轴线字体样式设置
              textStyle: {
                fontFamily: "ArialMT",
                fontSize: "10",
                color: "#000",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // min: 0,
            // max: 0,
            // interval: 0,
            // axisLabel: {
            //   formatter: "{value}",
            //   textStyle: {
            //     fontFamily: "ArialMT",
            //     fontSize: "12",
            //     color: "#86A5C3",
            //   },
            // },
            // splitLine: {
            //   //去除背景网格线
            //   // show: false,
            // },
            // axisTick: {
            //   //刻度
            //   // show: false, //不显示刻度线
            // },
            // axisLine: {
            //   lineStyle: {
            //     color: "#1E2240", //轴线的颜色
            //   },
            // },
          },
          {
            type: "value",
            min: 0,
            max: 0,
            interval: 0,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontFamily: "ArialMT",
                fontSize: "12",
                color: "#86A5C3",
              },
            },
            splitLine: {
              //去除背景网格线
              // show: false,
            },
            axisTick: {
              //刻度
              // show: false, //不显示刻度线
            },
            axisLine: {
              lineStyle: {
                color: "#1E2240", //轴线的颜色
              },
            },
          },
        ],
        legend: {
          data: ["进行中", "阻塞中", "已关闭"],
          left: "center",
          selected: {
            进行中: true,
            阻塞中: true,
            已关闭: false,
          },
        },
        series: [
          {
            //柱状(左边数据)
            name: "进行中",
            type: "bar",
            data: data[1],
            itemStyle: {
              //柱状图的背景色
              normal: {
                color: "#0060D1",
              },
            },
            barWidth: 6,
          },
          {
            //柱状(左边数据)
            name: "阻塞中",
            type: "bar",
            data: data[2],
            itemStyle: {
              //柱状图的背景色
              normal: {
                color: "#00D2FF",
              },
            },
            barWidth: 6,
          },
          {
            //折线(右边数据)
            name: "已关闭",
            type: "line",
            smooth: true,
            // yAxisIndex: 1,
            data: data[3],
            // itemStyle: {
            //   //折线颜色
            //   normal: {
            //     color: "red",
            //   },
            // },
          },
        ],
      };

      myChart5.setOption(option3);
      if (params) this.echarts6(name, params);
    },
    async echarts6(name, params) {
      // if (name) this.$set(this.radio, 0, name);
      let res = await dashboard.iterationVersion(params);
      let myChart6 = this.echarts.init(document.getElementById("main6"));
      let option6 = {
        title: {
          text: "", //标题
          x: "center",
        },
        grid: {
          //设置内容区域距离周边的距离
          left: "3%",
          right: "0",
          top: "50px",
          bottom: "0px",
          containLabel: true,
        },
        // tooltip: {
        //     trigger: 'item',
        //     formatter: "{a} <br/>{b}: {c} ({d}%)"
        // },
        color: ["#31b0d5", "pink"],
        legend: {
          // orient: 'vertical',
          // x: "center",
          y: "30px",
          data: ["延期关闭", "正常关闭"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "({d}%)", //显示标签
                },
                labelLine: {
                  show: true, //显示标签线
                  // length:10
                },

                borderWidth: 2, //设置border的宽度有多大
                borderColor: "#fff",
              },
            },

            data: [
              {
                value: res.data.version_status_destribute_pie.normal_closed,
                name: "正常关闭",
              },
              {
                value: res.data.version_status_destribute_pie.delay_closed,
                name: "延期关闭",
              },
            ],
          },
        ],
      };
      myChart6.setOption(option6);
    },
    echarts7() {
      let BorderWidth = "10";
      //反方向剩下部分的样式
      let placeHolderStyle = {
        normal: {
          label: {
            show: true,
            position: "center",
          },
          labelLine: {
            show: true,
          },
          color: "rgba(0,0,0,0)",
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 0,
        },
        emphasis: {
          color: "#dedede",
          borderColor: "#dedede",
          borderWidth: 0,
        },
      };
      let options = {
        backgroundColor: "#ffffff",
        color: ["#53f1f2", "#4ebefd", "#30ed9d"],
        legend: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "middle",
          data: ["定位", "地图", "交付"],
          textStyle: {
            color: "black",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return `${params.name}      ${params.value}`;
          },
        },
        series: [
          {
            name: "定位",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: true, //鼠标移入变大
            radius: [100, 101],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "outside",
                },
                labelLine: {
                  show: false,
                  length: 80,
                  smooth: 0.5,
                },
                borderWidth: BorderWidth,
                shadowBlur: 20,
                borderColor: "#53f1f2",
                shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
              },
            },
            data: [
              {
                value:
                  this.debugData.this_mouth_unsolved_bug_distribute_pie.postion,
                name: "定位",
              },
              {
                value: 3,
                name: "",
                itemStyle: placeHolderStyle,
              },
            ],
          },
          {
            name: "地图",
            type: "pie",
            clockWise: false,
            hoverAnimation: true,
            radius: [80, 81],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                  length: 80,
                  smooth: 0.5,
                },
                borderWidth: BorderWidth,
                shadowBlur: 20,
                borderColor: "#4ebefd",
                shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
              },
            },
            data: [
              {
                value:
                  this.debugData.this_mouth_unsolved_bug_distribute_pie.map,
                name: "地图",
              },
              {
                value: 4,
                name: "",
                itemStyle: placeHolderStyle,
              },
            ],
          },
          {
            name: "交付",
            type: "pie",
            clockWise: false,
            hoverAnimation: true,
            radius: [60, 61],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                  length: 80,
                  smooth: 0.5,
                },
                borderWidth: BorderWidth,
                shadowBlur: 20,
                borderColor: "#30ed9d",
                shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
              },
            },
            data: [
              {
                value:
                  this.debugData.this_mouth_unsolved_bug_distribute_pie.deliver,
                name: "交付",
              },
              {
                value: 5,
                name: "",
                itemStyle: placeHolderStyle,
              },
            ],
          },
        ],
      };
      let myChart7 = this.echarts.init(document.getElementById("main7"));
      myChart7.setOption(options);
    },
    echarts8() {
      let myChart8 = this.echarts.init(document.getElementById("main8"));
      let add = [];
      let close = [];
      for (let data of this.debugData.this_mouth_bug_histogram
        .bug_add_histogram) {
        for (let v of Object.values(data)) {
          add.push(v);
        }
      }

      for (let data of this.debugData.this_mouth_bug_line.bug_close_line) {
        for (let v of Object.values(data)) {
          close.push(v);
        }
      }

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["新增", "关闭"],
        },
        xAxis: [
          {
            type: "category",
            data: ["1", "2", "3", "4", "5", "6", "7"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "新增",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "关闭",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "新增",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " ";
              },
            },
            data: add,
          },
          {
            name: "关闭",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " ";
              },
            },
            data: close,
          },
        ],
      };

      myChart8.setOption(option);
    },
    echarts78(name, params) {
      if (name) this.$set(this.radio, 2, name);
      dashboard
        .bugData(params)
        .then((res) => {
          this.debugData = Object.assign({}, res.data.Bug_data);
          this.echarts7();
          this.echarts8();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async echarts9() {
      let res = await dashboard.historyBugDelay();
      let keys = Object.keys(
        res.data.history_unsolved_bug_delay_situation
      ).reverse();

      let vals = Object.values(
        res.data.history_unsolved_bug_delay_situation
      ).reverse();

      let myChart9 = this.echarts.init(document.getElementById("main9"));
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // legend: {},
        grid: {
          left: "2%",
          right: "1%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: keys,
        },
        series: [
          {
            name: "数据",
            type: "bar",
            data: vals,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 12,
                  },
                },
                //这里是颜色
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#2478f2",
                    "#5f9cf8",
                    "#84b7f9",
                    "#abd5ff",
                  ].reverse();
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };
      myChart9.setOption(option);
    },
    async echarts10() {
      let myChart10 = this.echarts.init(document.getElementById("main10"));
      let res = await dashboard.historyBugPriority();
      let vals = Object.values(
        res.data.history_unsolved_bug_priority_distribution_situation
      );
      let option = {
        title: {
          text: "", //标题
          x: "center",
        },
        color: ["#2478f2", "#5f9cf8", "#84b7f9", "#abd5ff"],
        legend: {
          // orient: 'vertical',
          x: "center",
          y: "top",
          data: ["致命级(1)", "严重级(2)", "一般级(3)", "提示级(4)"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            // vals
            data: [
              { value: vals[0], name: "致命级(1)" },
              { value: vals[1], name: "严重级(2)" },
              { value: vals[2], name: "一般级(3)" },
              { value: vals[3], name: "提示级(4)" },
            ],
            labelLine: { show: true },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  // position: "right",
                  formatter: "{b}: {c}",
                },
              },
            },
          },
        ],
      };
      myChart10.setOption(option);
    },
    echarts12() {
      console.log("echarts12");
      // let myChart = this.echarts.init(document.getElementById("main1"));
      // let myChart2 = this.echarts.init(document.getElementById("main2"));
      // let myChart3 = this.echarts.init(document.getElementById("main3"));
      let myChart4 = this.echarts.init(document.getElementById("main4"));

      let option = {
        color: ["#1684fc", "#eeeeee"],
        title: {
          text: "",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            hoverAnimation: false, //关闭放大动画
            selectedOffset: 0, //选中块的偏移量
            label: {
              show: false,
              position: "center",
              formatter: "日环比\n{d}%",
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: "15",
            //     fontWeight: "bold",
            //   },
            // },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: this.dataOverview.running_version.yesterday_add,
                name: "",
                selected: true, //默认选中第一块
                label: {
                  show: true, //默认显示第一块
                  fontSize: "15",
                  fontWeight: "bold",
                },
              },
              {
                value: this.dataOverview.running_version.total_num,
                name: "",
              },
            ],
          },
        ],
      };

      let xs = [];
      let ys = [];

      for (let i of this.dataOverview.unsolved_bug_plot.data_dot) {
        for (let x of Object.keys(i)) xs.push(x);
        for (let y of Object.values(i)) ys.push(y);
      }

      let option2 = {
        xAxis: {
          type: "category",
          data: xs,
        },
        yAxis: {
          type: "value",
        },
        legend: {
          data: ["未解决Bug数"],
          left: "center",
        },
        series: [
          {
            name: "未解决Bug数",
            data: ys,
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      };

      // myChart.setOption(option);

      option.series[0].data[0].value =
        this.dataOverview.onlined_version.yesterday_add;
      option.series[0].data[1].value =
        this.dataOverview.onlined_version.total_num;
      // myChart2.setOption(option);

      option.series[0].data[0].value =
        this.dataOverview.unsolved_bug.yesterday_add;
      option.series[0].data[1].value = this.dataOverview.unsolved_bug.total_num;
      // myChart3.setOption(option);
      myChart4.setOption(option2);
    },
    mountednew() {
      // let myChart = this.echarts.init(document.getElementById("main1"));
      // let myChart2 = this.echarts.init(document.getElementById("main2"));
      // let myChart3 = this.echarts.init(document.getElementById("main3"));
      let myChart4 = this.echarts.init(document.getElementById("main4"));

      let option = {
        color: ["#1684fc", "#eeeeee"],
        title: {
          text: "",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            hoverAnimation: false, //关闭放大动画
            selectedOffset: 0, //选中块的偏移量
            label: {
              show: false,
              position: "center",
              formatter: "日环比\n{d}%",
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: "15",
            //     fontWeight: "bold",
            //   },
            // },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: this.dataOverview.running_version.yesterday_add,
                name: "",
                selected: true, //默认选中第一块
                label: {
                  show: true, //默认显示第一块
                  fontSize: "15",
                  fontWeight: "bold",
                },
              },
              {
                value: this.dataOverview.running_version.total_num,
                name: "",
              },
            ],
          },
        ],
        grid: {
          left: "2%",
          // right: "0",
          // bottom: "1%",
          containLabesl: true,
        },
      };

      let xs = [];
      let ys = [];

      for (let i of this.dataOverview.unsolved_bug_plot.data_dot) {
        for (let x of Object.keys(i)) xs.push(x);
        for (let y of Object.values(i)) ys.push(y);
      }

      let option2 = {
        xAxis: {
          type: "category",
          data: xs,
        },
        yAxis: {
          type: "value",
        },
        legend: {
          data: ["未解决Bug数"],
          left: "center",
        },
        series: [
          {
            name: "未解决Bug数",
            data: ys,
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      };

      // myChart.setOption(option);

      option.series[0].data[0].value =
        this.dataOverview.onlined_version.yesterday_add;
      option.series[0].data[1].value =
        this.dataOverview.onlined_version.total_num;
      // myChart2.setOption(option);

      option.series[0].data[0].value =
        this.dataOverview.unsolved_bug.yesterday_add;
      option.series[0].data[1].value = this.dataOverview.unsolved_bug.total_num;
      // myChart3.setOption(option);

      myChart4.setOption(option2);

      setTimeout(() => {
        this.echarts5();
        this.echarts6();
        // this.echarts7();
      }, 2000);

      setTimeout(() => {
        // this.echarts8();
        this.echarts9();
        this.echarts10();
      }, 5000);
    },
    getDataOverview(name, params) {
      if (name) this.$set(this.radio, 0, name);
      dashboard.dataOverview(params).then((res) => {
        this.dataOverview = Object.assign({}, res.data.data_overview);
        this.echarts12();
      });
    },
  },
  mounted() {
    this.mountednew();
  },
  created() {
    dashboard
      .bugData("?date_range=7")
      .then((res) => {
        this.debugData = Object.assign({}, res.data.Bug_data);
      })
      .catch((err) => {
        console.log(err);
      });

    dashboard
      .dataOverview("?date_range=7")
      .then((res) => {
        this.dataOverview = Object.assign({}, res.data.data_overview);
        this.mountednew();
      })
      .catch((err) => {
        console.log(err);
      });
    setTimeout(() => {
      dashboard
        .rankBoard()
        .then((res) => {
          console.log(res);
          this.rankBoardData = Object.assign({}, res.data);
        })
        .catch((err) => {
          console.log(err);
        });

      dashboard
        .BugDetailList()
        .then((res) => {
          console.log(res);
          this.bugDetailList = res.data.Bug_detail_list;
        })
        .catch((err) => {
          console.log(err);
        });
    }, 800);
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
